<template>
    <div>
        <el-header>
            <headers @fnc="search" @inputchange="getinput">            
            </headers>
        </el-header>
        <el-main style="margin-top:1rem;">
            <!--跑马灯-->
            <el-row>
                <el-col :span="4">
                    <el-card shadow="never" style="height:325px;">
                        <div v-for="item of level1" :key="item.id">
                            <p>{{item.classification}}</p>
                            <el-link v-for="subitem of level2" :key="subitem.id" v-show="subitem.parentId==item.id" style="margin-left:1rem" @click="skip_search_from_classification(subitem.id)">{{subitem.classification}}</el-link>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="20">
                    <el-carousel :interval="5000" arrow="always" height="330px">
                        <el-carousel-item v-for="item in rotationData" :key="item.id">
                            <el-image :src="item.pic" @click="skip_detail(item.commodity.id)"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
            <el-row style="margin-top:1rem;">
                <el-col :span="24">
                    <el-image v-if="normalData['0']" :src="normalData['0'].pic" style="width:1370px;"
                        @click="skip_detail(normalData['0'].commodity.id)"></el-image>
                </el-col>
            </el-row>


            <el-row :gutter="10" style="margin-top:1rem;color:#615b73;">
                <h2>热卖区</h2>
                <el-container>

                    <el-aside>
                        <el-row>
                            <el-col>
                                <img  :src="main_ad1.pic" @click="skip_detail(main_ad1.commodity.id)" style="width: 300px; height: 595px">
                            </el-col>
                        </el-row>
                    </el-aside>
                    <el-main style="margin-left:30px;width:1030px;padding:0;overflow:hidden">
                        <el-row :gutter="30">
                            <el-col :span="4.5" v-for="item of ad1" :key="item.id">
                                <el-card :body-style="{ padding: '0',cursor:'pointer' }" shadow="hover">
                                    <img :src="item.pic" style="margin:24px;" @click="skip_detail(item.commodity.id)"
                                        class="image" width="180px" height="180px">
                                    <div style="padding: 0px;text-align:center;">
                                        <span @click="skip_detail">{{item.name}}</span>
                                        <div class="bottom clearfix">
                                            <el-link :underline="false" type="danger" style="padding:12px 20px;"
                                                @click="skip_detail">￥{{item.commodity.price}}</el-link>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-row>
            <el-row style="margin-top:1rem;">
                <el-col :span="24">
                    <el-image v-if="normalData['1']" :src="normalData['1'].pic" style="width:1370px;"
                        @click="skip_detail(normalData['1'].commodity.id)"></el-image>
                </el-col>
            </el-row>

            <el-row :gutter="10" style="margin-top:1rem;color:#615b73;">
                <h2>精品区</h2>
                <el-container>

                    <el-aside>
                        <el-row>
                            <el-col>
                               <img  :src="main_ad2.pic" @click="skip_detail(main_ad2.commodity.id)" style="width: 300px; height: 595px">
                            </el-col>
                        </el-row>
                    </el-aside>
                    <el-main style="margin-left:30px;width:1030px;padding:0;overflow:hidden">
                        <el-row :gutter="30">
                            <el-col :span="4.5" v-for="item of ad2" :key="item.id">
                                <el-card :body-style="{ padding: '0',cursor:'pointer' }" shadow="hover">
                                    <img :src="item.pic" style="margin:24px;" @click="skip_detail(item.commodity.id)"
                                        class="image" width="180px" height="180px">
                                    <div style="padding: 0px;text-align:center;">
                                        <span @click="skip_detail">{{item.name}}</span>
                                        <div class="bottom clearfix">
                                            <el-link :underline="false" type="danger" style="padding:12px 20px;"
                                                @click="skip_detail">￥{{item.commodity.price}}</el-link>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-row>


        </el-main>
    </div>
</template>


<style scoped>

</style>

<script>
    import headers from '@/components/headers.vue'
    //import axios from 'axios'
    export default {
        data: () => {
            return {
                rotationData: [],
                normalData: [],
                bestsellData: [],
                elaborateData: [],

                main_ad1:'',
                ad1:[],
                main_ad2:'',
                ad2:[],

                classifications: [],
                level1: [],
                level2: [],
                inputvalue:'',
            }
        },
        components: {
            headers
        },
        methods: {
            skip_detail(id) {
                this.$router.push("detail?id=" + id)
            },
            search(val){
                this.$router.push("search?classification=0&keywords="+val)
            },
            getinput(val){
                this.inputvalue=val
            },
            skip_search_from_classification(id){
                let url='./search?classification='+id+'&keywords='+this.inputvalue
                this.$router.push(url)
            }
        },
        created() {
            this.$axios.get(this.$store.state.base_url + '/ad/findall').then(data => {
                let datas = data.data.data
                for (const iterator of datas) {
                    if (iterator.type == "rotation") {
                        this.rotationData.push(iterator)
                    } else if (iterator.type == "normal") {
                        this.normalData.push(iterator)
                    } else if (iterator.type == "bestsell") {
                        this.bestsellData.push(iterator)
                    } else if (iterator.type == "elaborate") {
                        this.elaborateData.push(iterator)
                    }
                }
                this.main_ad1=this.bestsellData[0]
                this.main_ad2=this.elaborateData[0]
                this.ad1=this.bestsellData.splice(1,9)
                this.ad2=this.elaborateData.splice(1,9)
            })

            this.$axios.get(this.$store.state.base_url + '/classification/').then(data => {
                let datas = data.data.data
                this.classifications = datas
                for (const iterator of datas) {
                    if (iterator.level == 1) {
                        this.level1.push(iterator)
                    } else if (iterator.level == 2) {
                        this.level2.push(iterator)
                    }
                }
            })
        },
    }
</script>